<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
</head>
<body>
    <!-- 事件源： -->
    <button onclick="alert('hello world')">点击</button>
    <!-- 事件监听：绑定事件、触发事件
        1.html属性中提供on+事件类型：耦合性高，代码复用率低 
        2.DOM0绑定事件：对象.属性（on+事件类型）=事件处理函数
        3.DOM2绑定事件：对象.方法()；
    -->
        <button class="ck">点击2</button>
        <script>
            //获取节点
            const btn=document.querySelector('.ck');
            //对象.属性=事件处理程序（函数）；
            btn.onclick=function(){
                alert('hello btn2');
            };
            btn.onclick=null; //移出事件
        </script>
        <button id="btn">点击3</button>
        <script>
            const ck=document.querySelector('#btn');
            //添加事件监听(函数)addEventListener('事件类型'，'事件处理函数'，[true/false]);
            //事件类型不需要前缀on
            //ck.addEventListener('click',function(){
            //   alert('hello btn3'); 
            //});
            ck.addEventListener('click',test);
            ck.removeEventListener('click',test);
            
            let test=function(){
                alert('hello btn3');
            };
        </script>
</body>
</html>